<script setup lang="ts">
/**
 * @name DataSourceConfigs
 * @description 数据源配置
 */
import { type DataSourceConfig, useDataSourceConfigs } from '@/mixins/DataSourceConfigs/MixinDataSourceConfigs'
import StorageModeCell from '@/views/StatisticalIndicators/components/StorageModeCell.vue'
import type { Point } from '@/components/ReadonlyPointTree/ReadonlyPointTree'

const { form } = useKeepPageStore()
const [point, setPoint] = useState<Point | null>(null)
const {
  lists,
  loading,
  getConfigsByPointId,
  indicatorLists,
  getIndicatorsByPointId,
  save,
  saving,
} = useDataSourceConfigs()

function handleClickNode(o: Point) {
  setPoint(o)
}
function changeRowIndicator(row: Partial<DataSourceConfig>) {
  const t = unref(indicatorLists).find(i => i.indicatorNumber === row.indicatorNumber)
  row.unit = t?.unit || null
  row.indicatorName = t?.indicatorName || null
  row.storageMode = t?.storageMode
  // row.measuringPointNumber = t?.indicatorCode;
}
async function clickSave() {
  await save()
  const pointId = unref(point)?.id
  if (pointId)
    await getConfigsByPointId(pointId)
}

form(['/dictionary-management'])

watchEffect(async () => {
  const pointId = unref(point)?.id
  if (pointId) {
    await getIndicatorsByPointId(pointId)
    await getConfigsByPointId(pointId)
  }
})
</script>

<template>
  <div class="padding-sm flex container">
    <div class="points-container">
      <ReadonlyPointTree fire :need-full-name="1" @click-node="handleClickNode" />
    </div>
    <div class="margin-left-sm flex-fillRemaining roll flex-direction flex">
      <div class="data-source-configs-title flex items-center">
        <strong>用能单元：</strong>
        <span class="text-truncate">{{ point?.pointFullName }}</span>
        <ElButton type="primary" class="ml-auto" :loading="saving" @click="clickSave">
          保存
        </ElButton>
      </div>
      <ElTable
        v-loading="loading"
        class="data-source-configs-table mt-4 flex-1" :data="lists"
        height="100%"
      >
        <template #empty>
          <TableEmpty />
        </template>
        <ElTableColumn label="参数" prop="parameterValue" width="220px">
          <template #header>
            <div class="flex items-center justify-center">
              参数
              <ElLink
                class="ml-3"
                @click="$router.push({ name: 'DictionaryManagement', query: { dicCode: 'SHU_JU_YUAN_CAN_SHU' } })"
              >
                [点击配置]
              </ElLink>
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="数据源" prop="indicatorNumber" width="300px">
          <template #default="{ row }">
            <ElSelect
              v-model="row.indicatorNumber"
              class="free" placeholder="选择数据源"
              clearable filterable
              @change="changeRowIndicator(row)"
            >
              <ElOption
                v-for="(item) in indicatorLists"
                :key="item.indicatorNumber"
                :label="item.indicatorName + (item.indicatorNumber ? `（${item.indicatorNumber}）` : '')"
                :value="item.indicatorNumber!"
                :disabled="item.disabled"
              >
                <span style="float: left">{{ item.indicatorName }}</span>
                <span
                  style="
                  float: right;
                  color: var(--el-text-color-secondary);
                  font-size: 13px;
                "
                >
                  {{ item.indicatorNumber }}
                </span>
              </ElOption>
            </ElSelect>
          </template>
        </ElTableColumn>
        <ElTableColumn label="单位" prop="unit">
          <template #default="{ row }">
            <span>{{ row.unit ?? '-' }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn label="存储周期" width="350px">
          <template #default="{ row }">
            <StorageModeCell v-if="row.storageMode" :mode="row.storageMode" />
            <span v-else>-</span>
          </template>
        </ElTableColumn>
      </ElTable>
    </div>
  </div>
</template>

<style lang="scss">
.data-source-configs-title {
  user-select: text;
  font-size: var(--el-font-size-base);
  & > span {
    color: var(--el-text-color-regular);
  }
}
</style>
